<template>
  <div class="select-warp">
    <span style="margin-left: 40px;font-size: 18px;font-weight: bold">一级分类</span>
    <el-select slot="prepend" v-model="selecta" placeholder="请选择" style="margin:20px 20px" :disabled="selectDisabled">
      <el-option v-for="item in getCategoryIData " :key="item.id" :label="item.name" :value="item.name" @click.native="getcategory2Id(item.id)" />
    </el-select>
    <span style="font-size: 16px;font-weight: bold">二级分类</span>
    <el-select slot="prepend" v-model="selectb" placeholder="请选择" style="margin:20px 20px" :disabled="selectDisabled">
      <el-option v-for="item in getcategory2Data" :key="item.id" :label="item.name" :value="item.name" @click.native="getcategory3Name(item.id)" />
    </el-select>
    <span style="font-size: 14px;font-weight: bold">三级分类</span>
    <el-select slot="prepend" v-model="selectc" placeholder="请选择" style="margin:20px 20px" :disabled="selectDisabled">
      <el-option v-for="item in getcategory3Data" :key="item.id" :label="item.name" :value="item.name" @click.native="getshopList(item.id)" />
    </el-select>
  </div>
</template>

<script>
import { getCategory, getCategory2Id, getCategory3Id } from '@/api/shopAttr'

export default {
  name: 'Select',
  data() {
    return {
      selecta: '',
      selectb: '',
      selectc: '',
      getCategoryIData: [],
      getcategory2Data: [],
      getcategory3Data: [],
      // 请求商品属性的列表
      reqlist: {
        category1Id: '',
        category2Id: '',
        category3Id: ''
      },
      selectDisabled: false
    }
  },
  mounted() {
    this.getCategoryIid()
  },
  methods: {
    async getCategoryIid() {
      const res = await getCategory()
      if (res.code === 200) {
        this.getCategoryIData = res.data
      }
    },
    // 获取二级分类
    async getcategory2Id(id) {
      this.reqlist.category1Id = id
      this.selectb = ''
      const res = await getCategory2Id(id)
      if (res.code === 200) {
        this.getcategory2Data = res.data
      }
    },
    // 获取三级分类
    async getcategory3Name(id) {
      this.reqlist.category2Id = id
      this.selectc = ''
      const res = await getCategory3Id(id)
      if (res.code === 200) {
        this.getcategory3Data = res.data
      }
    },
    getshopList(id) {
      this.reqlist.category3Id = id
      this.$emit('getreqList', this.reqlist)
    }
  }
}
</script>

<style scoped>

</style>
